<template>
  <div class="container-fluid">
    <div class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a href="#" class="navbar-brand">CMS</a>
      <div class="navbar-text">欢迎使用CMS系统</div>
      <div class="ml-auto">
        <span class="navbar-text">欢迎登陆【{{ $store.state.user.username}}】</span>
        <a href="javascript:void(0)" @click="logout" class="navbar-text">退出</a>
      </div>
    </div>
    <div class="row vh-100 pt-5">
      <div class="col-3 h-100 p-0">
        <Card title="内容管理" class="h-100 p-0" header-class="bg-white">
          <ul class="list-group list-group-flush">
            <li class="list-group-item" v-for="(nav,index) in navs" :key="index">
              <router-link :to="nav.path">{{nav.title}}</router-link>
            </li>
          </ul>
        </Card>
      </div>
      <div class="col-9 p-0">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Card from "@/components/Card";
export default {
  name: "Home",
  components: { Card },
  data: function() {
    return {
      articles: [
        { title: "标题1", category: 1, hot: true },
        { title: "标题2", category: 2, hot: false },
        { title: "标题3", category: 3, hot: false }
      ],
      categories: [
        { value: 0, title: "默认" },
        { value: 1, title: "栏目一" },
        { value: 2, title: "栏目二" },
        { value: 3, title: "栏目三" }
      ],
      navs: [
        { title: "新增文章", path: "/article/edit" },
        { title: "文章列表", path: "/article/list" }
      ]
    };
  },
  methods: {
    logout() {
      this.$router.push({ path: "/login" });
    }
  }
};
</script>
